<template>
  <div class="content">
    <div class="tab-bar">
      <div class="tab-bar-item" v-for="(item, index) in subjectType" :key="index" @click="handleTabClick(index)"
        :class="{ selected: activeIndex === index }">
        {{ item }}
      </div>
      <div class="active-bar" :style="activeBarStyle"></div>
    </div>

    <!-- 可选的 tab 内容区域 -->
    <div class="tab-content">
      <slot :name="`tab-${activeIndex}`"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const props = defineProps({
  tabs: {
    type: Array as () => string[],
    default: () => ['科目一', '科目四', '满分学习', '注销重考', '三力测试'],
  }
})

const emit = defineEmits(['tab-change'])

const subjectType = ref(props.tabs)
const activeIndex = ref(userStore.activeTab)

// 计算 active bar 的位置
const activeBarStyle = computed(() => {
  const tabCount = subjectType.value.length
  const position = (100 / tabCount) * (activeIndex.value + 0.5) // 计算中间位置

  return {
    left: `${position}%`,
    width: `1.5%`, // 宽度为 tab 宽度的 50%
  }
})

watch(() => userStore.activeTab, (newVal: any) => {
  activeIndex.value = newVal
})

const handleTabClick = (index: number) => {
  activeIndex.value = index
  // userStore.setActiveTab(index)
  emit('tab-change', index)
}
</script>

<style scoped lang="scss">
@use "sass:math";

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

.content {
  width: 100%;
}

.tab-bar {
  background-color: #fff;
  height: rem(90);
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.tab-bar-item {
  flex: 1;
  height: 100%;
  line-height: rem(90);
  text-align: center;
  cursor: pointer;
  font-size: rem(30);
  font-weight: 400;
  color: #60646b;
  transition: all 0.3s ease;

  &:hover {
    color: #00c356;
    font-weight: 600;
  }
}

.selected {
  color: #00c356;
  font-weight: 600;
}

.active-bar {
  height: 3px;
  background: #00c356;
  border-radius: 6px 6px 0 0;
  position: absolute;
  bottom: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.tab-content {
  // padding: 0 60px;
  background: #fff;
  // min-height: calc(100vh - 92px - 90px);
}
</style>
